import React from "react";
import { Steps, Carousel, Form, Input, DatePicker, Radio } from 'antd';
const { Step } = Steps;
const { RangePicker } = DatePicker;
const App = () => {

  const [value, setValue] = React.useState(1);

  const onChange = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  return (
    <Radio.Group onChange={onChange} value={value}>
      <Radio value={1}>关闭</Radio>
      <Radio value={2}>开启</Radio>

    </Radio.Group>
  );
};

function Bargainlz() {

  const contentStyle = {
    marginLeft: '200px'

  };

  return <div>
    <Steps current={1} >
      <Step style={{ marginLeft: "100px", marginTop: "20px" }} description="选择砍价商品" />
      <Step style={{ marginTop: "20px", position: "absolute", left: "43%" }} description="填写基本信息" />
      <Step style={{ marginRight: "200px", marginTop: "20px" }} description="修改商品详情" />
    </Steps>
    <p style={{ marginLeft: "120px", marginTop: "20px" }}>商品轮播图:</p>

    <div>
      <Carousel autoplay>

        <div >
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3008084797,1969510297&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2107170464,3006331359&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=97186187,4001788469&fm=224&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=353888640,2879743492&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
      </Carousel>
      <Carousel autoplay style={{ marginLeft: '150px', marginTop: '-110px' }}>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=353888640,2879743492&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2107170464,3006331359&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=97186187,4001788469&fm=224&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3048821563,1776141790&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
      </Carousel>
      <Carousel autoplay style={{ marginLeft: '300px', marginTop: '-110px' }}>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3008084797,1969510297&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3048821563,1776141790&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=97186187,4001788469&fm=224&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=353888640,2879743492&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
      </Carousel>
      <Carousel autoplay style={{ marginLeft: '450px', marginTop: '-110px' }}>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3008084797,1969510297&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2107170464,3006331359&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=97186187,4001788469&fm=224&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>
        <div>
          <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=353888640,2879743492&fm=26&fmt=auto&gp=0.jpg" style={{ width: "100px", height: '100px' }} alt="" /></h3>
        </div>

      </Carousel>

    </div>
    <div>
      <Form
        name="basic"


        autoComplete="off"
      >
        <Form.Item
          label="砍价活动名称"

          name="username"
          style={{ width: "500px", marginLeft: "110px", marginTop: '20px' }}
          rules={[{ required: true, message: '请输入砍价名称' }]}
        >
          <Input />
        </Form.Item>


      </Form>
    </div>
    <div>
      <Form
        name="basic"


        autoComplete="off"
      >
        <Form.Item
          label="砍价活动简称"

          name="username"
          style={{ width: "500px", marginLeft: "110px", marginTop: '20px' }}
          rules={[{ required: true, message: '请输入砍价名称' }]}
        >
          <Input />
        </Form.Item>


      </Form>
    </div>
    <div>




      <Form.Item
        label="活动日期"

        name="username"
        style={{ width: "500px", marginLeft: "110px", marginTop: '20px' }}
        rules={[{ required: true, message: '请输入砍价名称' }]}
      >
        <RangePicker />
      </Form.Item>







    </div>
    <div>




      <Form.Item
        label="活动状态"

        name="username"
        style={{ width: "500px", marginLeft: "110px", marginTop: '20px' }}
        rules={[{ required: true, message: '请输入砍价名称' }]}
      >
        <App />
      </Form.Item>







    </div>
  </div>

}


export default Bargainlz;
